<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品详情</title>
    <!-- 初始化 -->
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 公共css -->
    <link rel="stylesheet" href="./css/common.css">
    <!-- 引入自己css -->
    <link rel="stylesheet" href="./css/info.css">

     <!-- 引入公共js -->
     <script src="./js/common.js"></script>
    <!-- 引入自己js -->
    <script src="./js/info.js"></script>


</head>

<body>
    <!-- 头部 -->
    <div id="header">
        <!-- 版心 -->
        <div class="wrap clearfix headerBox">
            <!-- 头部logo -->
            <div class="headerLogo infologo fl">
                <div class="infologo-img"></div>
                <div class="infologo-text">
                    <div class="infologo-tex">
                        <p>读好书</p>
                        <p>好读书</p>
                    </div>
                </div>
                <div class="infologo-white"></div>
                <div class="infologo-greenbox">全部商品分类</div>
            </div>
            <!-- 左侧legou.cn -->
            <div class="headerText fl">legochina.cn</div>
            <!-- 右侧登录 -->
            <div class="headerLogin fr">
                <!-- span贴紧不能换行，不然字间距变大了 -->
                <span>欢迎光临</span>
                <span class="link-homepage ">乐购</span>
                <span>,请</span>
                <span class="link-login">登录/</span>
                <span class="link-regist ">注册</span>
            </div>
        </div>
    </div>
    <!-- 搜索栏和头部导航 -->
    <div class="wrap">
        <!-- 搜索栏 -->
        <div class="searchbox">
            <!-- 版心 -->
            <div class="wrap clearfix">
                <!-- 购物车，我的订单 向右浮动所以靠右的内容放前面 -->
                <div class="shopping-order fr clearfix">
                    <!-- 购物车 -->
                    <div class="shopping fl">
                        <!-- 购物车图标 -->
                        <span class="shopping-icon"></span>
                        <span>购物车</span>
                        <span>3</span>
                    </div>
                    <!-- 我的订单 -->
                    <div class="order fl">我的订单</div>
                </div>
                <!-- 搜索输入栏 -->
                <div class="search fr">
                    <!-- 输入框 -->
                    <div class="s-ipt">
                        <input type="text" placeholder="创意文具" id="oldInp">
                    </div>
                    <!-- 搜索按钮 -->
                    <div class="s-btn"></div>
                </div>

            </div>
        </div>
        <!-- 头部品类导航 -->
        <div class="top-nav">
            <ul>
                <li class="nav-list fl">图书</li>
                <li class="nav-list fl">电子书</li>
                <li class="nav-list fl">原创文学</li>
                <li class="nav-list fl">服装</li>
                <li class="nav-list fl">户外运动</li>
                <li class="nav-list fl">孕婴童</li>
                <li class="nav-list fl">家居</li>
                <li class="nav-list fl">创意文具</li>
                <li class="nav-list fl">地方特色</li>
                <li class="nav-list fl">海外购</li>
                <li class="nav-list fl">电器城</li>
            </ul>
        </div>
    </div>
    <!-- 主体内容 -->
    <div id="main">
        <!-- 商品详情 -->
        <div class="infobox">
            <div class="wrap">
                <div class="info-title">
                    <span class="bigfont">图书</span>
                    <span class="smallfont">> 小说 > 情感/家庭/婚姻 > 博集天卷 > 她和他</span>
                </div>
                <!-- 详情介绍 -->
                <div class="info clearfix">
                    <div class="info-left fl">
                        <!-- 大图 -->
                        <div class="info-top">
                            <div class="top-img-item show">
                                <img src="./images/book1 (1).jpg" alt="">
                            </div>
                            <div class="top-img-item">
                                <img src="./images/book1 (2).jpg" alt="">
                            </div>
                            <div class="top-img-item">
                                <img src="./images/book1 (3).jpg" alt="">
                            </div>
                            <div class="top-img-item">
                                <img src="./images/book1 (4).jpg" alt="">
                            </div>
                        </div>
                        <div class="info-bottom clearfix">
                            <div class="left-btn fl"></div>
                            <!-- 小图 -->
                            <div class="bottom-img fl clearfix">
                                <div class="bottom-img-item img-active fl">
                                    <img src="./images/book1 (1).jpg" alt="">
                                </div>
                                <div class="bottom-img-item fl">
                                    <img src="./images/book1 (2).jpg" alt="">
                                </div>
                                <div class="bottom-img-item fl">
                                    <img src="./images/book1 (3).jpg" alt="">
                                </div>
                                <div class="bottom-img-item fl">
                                    <img src="./images/book1 (4).jpg" alt="">
                                </div>
                            </div>
                            <div class="right-btn fl"></div>
                        </div>
                        <p class="f16 c64 ta">商品编号：11950959</p>
                    </div>
                    <div class="info-right fl">
                        <div class="info-top-text">
                            <p class="one">她和他 </p>
                            <p class="two">《偷影子的人》作者马克·李维重磅新作，法国连续60周在榜，销量突破120万册</p>
                            <p class="three">[法] 马克·李维 著；杨亦雨 译</p>
                        </div>
                        <div class="info-price">
                            <p>乐 购 价：
                                <span class="font-red font24"> ￥26.20 </span> [6.9折] [定价：
                                <span class="lt"> ￥38.00 </span> ] (降价通知)
                            </p>
                            <p>促销信息：
                                <span class="font-red">满减 每满150.00元，可减50.00元现金</span> 详情 >></p>
                            <p class="clearfix">
                                <p class="fl">领 券：</p>
                                <div class="coupon fl">100-6</div>
                                <div class="coupon fl">100-6</div>
                            </p>
                            <div class="appraise">
                                <p>累计评价</p>
                                <p class="f60">99999</p>
                            </div>
                        </div>
                        <div class="info-kind clearfix">
                            <p class="text fl">种类选择：</p>
                            <div class="kind fl">
                                平装版
                                <div class="icon"></div>
                            </div>
                            <div class="kind kind-active fl">
                                精装版
                                <div class="icon show"></div>

                            </div>
                        </div>
                        <div class="info-num-car clearfix">
                            <div class="info-num fl">
                                <p id="sum">1</p>
                                <div class="info-num-top">+</div>
                                <div class="info-num-bottom">-</div>
                            </div>
                            <div class="info-car fl">加入购物车</div>
                        </div>
                        <p class="sevenday">温馨提示：支持7天无理由退货</p>
                    </div>

                </div>
            </div>
        </div>
        <!-- 人气商品 -->
        <div class="populer">
            <div class="wrap">
                <div class="populer-title">
                    <div class="populer-title-text ta">
                        人气单品
                    </div>
                </div>
                <div class="populer-content clearfix">
                    <div class="populer-item1">
                        <div class="populer-item-img">

                        </div>
                        <div class="populer-item-text">
                            <div class="populer-item-icon">
                                8折
                            </div>
                            <p class="populer-item-writer">白夜行 &nbsp; 东野上吾</p>
                            <div class="populer-item-star">
                                <div class="cred fl">推荐：</div>
                                <div class="populer-item-starbox fl">
                                    <div class="star-null"></div>
                                    <div class="star-solid"></div>
                                </div>
                            </div>
                            <p class="new-oldprice">
                                <span class="populer-item-newprice">￥:38</span>
                                <span class="populer-item-oldprice lt">￥:58</span>
                            </p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <!-- appraise评价 -->
        <div class="all-appraise mat50">
            <div class="wrap clearfix">
                <div class="all-appraise-left fl">
                    <div class="all-appraise-left-title">看了又看</div>
                    <div class="all-appraise-left-content">
                        <!-- 下排图*7  js-->
                    </div>
                </div>
                <div class="all-appraise-right fr">
                    <!-- 标题 -->
                    <div class="all-appraise-righ-toptitle clearfix">
                        <div class="all-appraise-righ-toptitle-text fl">商品介绍</div>
                        <div class="all-appraise-righ-toptitle-text fl all-appraise-activ">评价（9999）</div>
                    </div>
                    <!-- 俩选项 -->
                    <div class="all-appraise-right-content-box">
                        <div class="all-appraise-right-content ">
                            <img class="bigbigpic" src="/images/商品详情.jpg" alt="">
                            <p class="content1-text">作品简介
                                <br> 她叫米娅，来自英国，当红女演员，却只想远离萧瑟的伦敦，聆听感动与欢笑的话语。
                                <br> 他叫保罗，来自美国，曾经的建筑设计师，因为一本书一炮而红，却无法适应他人追逐的目光。他隐身于
                                <br>巴黎， 只能与自己小说中的人物结为挚友。
                                <br> 米娅的事业非常成功，保罗却一直郁郁不得志。保罗幽默风趣，米娅却不善与人交际。她很孤单，他也
                                <br> 一直如此。缘于朋友善意的恶作剧，米娅和保罗相识于社交网络，却没有成为恋人，他们发展出很好的友谊
                                <br> ，并试图将友情一直维持下去。
                                <br> 然而，一些意想不到的事情发生了······
                            </p>
                        </div>
                        <div class="all-appraise-right-content show">
                            <!-- 好评 -->
                            <div class="all-appraise-righ-good">
                                <ul class="clearfix all-appraise-righ-goodBox">
                                    <li class="degree-of-praise fl">
                                        <div class="degree-of-praise-num">98%</div>
                                        <div class="degree-of-praise-text">好评度</div>
                                    </li>
                                    <li class="fl">
                                        <div class="praiseDate clearfix">
                                            <p class="fl">好评(98%)</p>
                                            <div class="praiseDatebox fl">
                                                <div class="praiseDateNull"></div>
                                                <div class="praiseDateSolid"></div>
                                            </div>
                                        </div>
                                        <div class="praiseDate clearfix">
                                            <p class="fl">中评 (2%)</p>
                                            <div class="praiseDatebox fl">
                                                <div class="praiseDateNull"></div>
                                                <div class="praiseDateSolid1"></div>
                                            </div>
                                        </div>
                                        <div class="praiseDate clearfix">
                                            <p class="fl">差评 (0%)</p>
                                            <div class="praiseDatebox fl">
                                                <div class="praiseDateNull"></div>
                                                <div class="praiseDateSolid2"></div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="fl">
                                        <!-- 评论gooduser -->
                                        <p class="gooduser">
                                            <span>1.洲**子 &emsp;&emsp; +0 </span>
                                            <span>2.洲**子 &emsp;&emsp; +0 </span>
                                        </p>
                                        <p class="gooduser">
                                            <span>3.洲**子 &emsp;&emsp; +10 </span>
                                            <span>4.洲**子 &emsp;&emsp; +10 </span>
                                        </p>
                                    </li>
                                </ul>
                            </div>
                            <!-- 下面小标题 -->
                            <div class="all-appraise-righ-mintitle mat50">
                                <span class="cred">全部评价（9999）</span>
                                <span>好评（888）</span>
                                <span>中评（888）</span>
                                <span>差评（888）</span>
                            </div>
                            <!-- 详细评论 -->
                            <div class="all-appraise-right-redstar">
                                <div class="all-appraise-right-redstar-item clearfix">
                                    <div class="itemLeft fl">
                                        <div class="itemLeft-starbox">
                                            <div class="itemLeft-star-null"></div>
                                            <div class="itemLeft-star-solid"></div>
                                        </div>
                                        <p>下单后5天评论</p>
                                        <p>2016-08-11</p>
                                    </div>
                                    <div class="itemMiddle fl">
                                        书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关 键是价格真给力
                                    </div>
                                    <div class="itemRight fl">
                                        <div class="itemRightimg">
                                            <img src="./images/K.png" alt="">
                                            <span>洲**子</span>
                                        </div>
                                        <p class="gold">金牌会员</p>
                                        <p>来自iPhone客户端</p>
                                    </div>
                                </div>
                                <!-- js优化方法一 -->
                                <script>
                                    for (let i = 0; i < 12; i++) {
                                        document.write(`<div class="all-appraise-right-redstar-item clearfix">
                                    <div class="itemLeft fl">
                                        <div class="itemLeft-starbox">
                                            <div class="itemLeft-star-null"></div>
                                            <div class="itemLeft-star-solid"></div>
                                        </div>
                                        <p>下单后5天评论</p>
                                        <p>2016-08-11</p>
                                    </div>
                                    <div class="itemMiddle fl">
                                        书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关 键是价格真给力
                                    </div>
                                    <div class="itemRight fl">
                                        <div class="itemRightimg">
                                            <img src="./images/K.png" alt="">
                                            <span>洲**子</span>
                                        </div>
                                        <p class="gold">金牌会员</p>
                                        <p>来自iPhone客户端</p>
                                    </div>
                                </div>`)
                                    }
                                </script>
                            </div>
                            <!-- 页码 -->
                            <div class="all-appraise-right-pagenum clearfix">
                                <ul class="fl clearfix">
                                    <li class="fl pagestyle">01</li>
                                    <li class="fl">02</li>
                                    <li class="fl">03</li>
                                    <li class="fl">04</li>
                                    <li class="fl">05</li>
                                    <li class="fl">......</li>
                                </ul>
                                <div class="nextpage fl">下一页</div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="all-appraise-bottomImg fl"></div>
            </div>
            <!-- 页脚 -->
            <div id="footer " class="mat50 footer">
                <!-- 发货流程 -->
                <div class="step ">
                    <div class="imgbox clearfix">
                        <div class="step-img fl"></div>
                        <div class="step-img fl"></div>
                        <div class="step-img fl"></div>
                        <div class="step-img fl"></div>
                    </div>
                </div>
                <!-- 底部导航 -->
                <div class="bottom-nav">
                    <ul class="clearfix">
                        <li>
                            <p>购物指南</p>
                            <ul>
                                <li>购物流程</li>
                                <li>发票制度</li>
                                <li>账户管理</li>
                                <li>会员优惠</li>
                            </ul>
                        </li>
                        <li>
                            <p>支付方式 </p>
                            <ul>
                                <li>货到付款</li>
                                <li>网上支付</li>
                                <li>礼品卡支付</li>
                                <li>银行转帐</li>
                            </ul>
                        </li>
                        <li>
                            <p>购物指南</p>
                            <ul>
                                <li>购物流程</li>
                                <li>发票制度</li>
                                <li>账户管理</li>
                                <li>会员优惠</li>
                            </ul>
                        </li>
                        <li>
                            <p>购物指南</p>
                            <ul>
                                <li>购物流程</li>
                                <li>发票制度</li>
                                <li>账户管理</li>
                                <li>会员优惠</li>
                            </ul>
                        </li>
                        <li>
                            <p>商家服务</p>
                            <ul>
                                <li>商家中心</li>
                                <li>运营服务</li>
                                <li>加入尾品汇</li>
                            </ul>

                        </li>
                    </ul>
                </div>
                <!-- 公司简介 -->
                <div class="bottom-bottom">
                    <div class="bot-bot-top">
                        公司简介 &emsp; | &emsp; Investor Relations &emsp; | &emsp; 网站联盟&emsp; | &emsp;乐购招商&emsp; | &emsp; 机构销售 &emsp; | &emsp;手机乐购&emsp;
                        | &emsp; 官方Blog &emsp; | &emsp;热词搜索
                    </div>
                    <div class="bot-bot-bot">
                        Copyright (C) 乐购网 2004-2016, All Rights Reserved
                    </div>
                </div>
                <!-- 固定图标 -->
                <div class="fix-icon"></div>
            </div>

</body>

</html>